리액트 성능 최적화

❓질문

리액트에서 성능 최적화를 위해 적용할 수 있는 방법들을 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

리액트에 불필요한 리렌더링을 줄이는것이 가장 큰 성능 최적화에 대한 목적이라고 생각합니다.
불필요한 리렌더링을 막기 위해 불필요한 state의 생성을 지양하고 변수로 선언하여 사용할수있는 부분은 변수로 선언하여 상용합니다.
하나의 데이터로 묶을수있는 상태는 따로따로 상태를 만들지말고 하나의 상태로 객체 형태로 묶어 사용합니다

🏫 정리한 내용

첫번째로는 React.memo()를 통해서 Component를 메모이제이션 할수있습니다. 이는 Props가 변경 되지않았을때의 불필요한 리렌더링을 방지합니다.

또는 16.8 이상이라면 React.hook에 useMemo와 useCallback을 사용할수있습니다
useCallback은 불필요한 함수의 재생성을 막고 useMemo는 값의 재계산을 방지하여
props에 전달되는 함수(콜백)나 값(메모)이 변경되지않으면 리렌더링 되지않게 할수있습니다.

두번째는 코드 스플리팅이 있습니다 큰 어플리케이션에서 여러 청크로 나누어 필요한 청크만 로드하게하여 초기 로딩 시간을 줄입니다 React.lazy와 Suspense를 사용해서 동적으로 컴포넌트를 불러올수있습니다.